import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ONE_PIXEL, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomImage from '../image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'

export default function EmptyView (props) {
  const { emptyImg, firstTip, secondTip, style, onPress, btnLabel } = props
  return (
    <View style={[styles.emptyView].concat(style)}>
      <CustomImage style={styles.emptyImg} source={emptyImg}/>
      {
        !!firstTip && <Text style={styles.emptyTextFirstTip}>{firstTip}</Text>
      }
      {
        !!secondTip && <Text style={styles.emptyTextSecondTip}>{secondTip}</Text>
      }
      {
        !!btnLabel &&
        <CustomButton style={styles.btnView} onPress={onPress}>
          <Text style={styles.btnLabel}>{btnLabel}</Text>
        </CustomButton>
      }
    </View>
  )
}
EmptyView.propTypes = {
  emptyImg: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  firstTip: PropTypes.string,
  secondTip: PropTypes.string,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  onPress: PropTypes.func,
  btnLabel: PropTypes.string
}

const styles = StyleSheet.create({
  emptyView: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'center'
    paddingTop: ScaleS(133)
  },
  emptyImg: {
    // width: ScaleS(120),
    // height: ScaleS(120),
    marginBottom: ScaleS(26)
  },
  emptyTextFirstTip: {
    color: '#A6A6A6',
    fontSize: ScaleT(16),
    fontWeight: '400',
    lineHeight: ScaleS(22),
    marginBottom: ScaleS(26)
  },
  emptyTextSecondTip: {
    color: '#282828',
    fontSize: ScaleT(13),
    fontWeight: '400',
    lineHeight: ScaleS(18),
    marginTop: ScaleS(18),
    marginBottom: ScaleS(26)
  },
  btnView: {
    borderRadius: ScaleS(4),
    backgroundColor: '#FFE400',
    paddingHorizontal: ScaleS(22),
    paddingVertical: ScaleS(8),
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnLabel: {
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#3C3C3C'
  }
})
